﻿{% extends 'base.html' %}
{% load staticfiles %}

{% block title %}产品详情 - 哆唻咪启蒙乐园{% endblock %}

{% block custom_content %}

    <section class="page-title center">
        <div class="container">
            <h2>Goods</h2>
            <ul>
                <li><a href="{% url "main:index" %}">主页</a></li>
                <li><a href="{% url "shop:shop" %}">商城</a></li>
                <li><a href="#">商品</a></li>
            </ul>
        </div>
    </section>

    <section class="blog-page-content latest-news section-padding shop-page single-blog-page single-class-content">
        <div class="container">
            <div class="single-product-box">
                <div class="row">
                    <div class="col-md-6">
                        <div class="product-info">
                            <div class="single-product-carousel-content-box owl-carousel owl-theme">
                                <div class="item">
                                    <img src="{{ goods.pic.url }}" alt="{{ goods.name }}">
                                </div>
                                <div class="item">
                                    <img src="{{ goods.pic.url }}" alt="{{ goods.name }}">
                                </div>
                                <div class="item">
                                    <img src="{{ goods.pic.url }}" alt="{{ goods.name }}">
                                </div>
                                <div class="item">
                                    <img src="{{ goods.pic.url }}" alt="{{ goods.name }}">
                                </div>

                            </div>
                            <div class="single-product-carousel-thumbnail-box owl-carousel owl-theme">
                                <div class="item">
                                    <img src="{{ goods.pic.url }}" alt="{{ goods.name }}">
                                </div>
                                <div class="item">
                                    <img src="{{ goods.pic.url }}" alt="{{ goods.name }}">
                                </div>
                                <div class="item">
                                    <img src="{{ goods.pic.url }}" alt="{{ goods.name }}">
                                </div>
                                <div class="item">
                                    <img src="{{ goods.pic.url }}" alt="{{ goods.name }}">
                                </div>
                            </div>
                            <div class="link add_cart"><a>
                                <span class="icon-add"></span></a></div>
                        </div>


                    </div>
                    <div class="col-md-6">
                        <div class="top-box clearfix">
                            <div class="text-box">
                                <h3>{{ goods.name }}</h3>
                                <div class="box">
                                    <ul class="list-inline">
                                        <li><span><i class="fa fa-star"></i></span></li>
                                        <li><span><i class="fa fa-star"></i></span></li>
                                        <li><span><i class="fa fa-star"></i></span></li>
                                        <li><span><i class="fa fa-star"></i></span></li>
                                        <li><span class="no-star"><i class="fa fa-star-o"></i></span></li>
                                    </ul>
                                    <span>{{ goods.buyers_number }} 人购买&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                    <span>库存剩余&nbsp;&nbsp;{{ goods.stock}}&nbsp;&nbsp;件</span>
                                </div>
                            </div>
                            <div class="text">
                                {{ goods.description }}
                            </div>
                            <div class="price-box" sku_id="{{ goods.id }}">
                                {{ goods.price }} 元
                            </div>
                            <div class="extra-price">
                                包邮
                            </div>

                        </div>


                        <div class="bottom-box clearfix">
                            <div class="input-box pull-left">
                                <span>数量:</span><input type="number" id="number" value="1">
                            </div>
                        </div>

                        <div class="norms">
                            <div>规格:</div>
                            <ul>
                                {% for standard in same_spu_products %}
                                    <li><a href="{% url 'product:detail' standard.id %}">{{ standard.unite }}</a></li>
                                {% endfor %}
                            </ul>

                        </div>

                        <div class="total">总价：<em id='gtotal'></em></div>

                        <div class="button-box pull-left">
                            <a class="thm-btn btn-style-one add_cart" id="add_cart">加到购物车</a>
                        </div>
                        <div class="button-box pull-left">
                            <a href="{% url "shop:order" %}" class="thm-btn btn-style-one">立即购买</a>
                        </div>

                        <div class="share-box pull-left">
                            <a href="#" class="share-btn"><span class="icon-symbol"></span></a>
                        </div>

                        <div class="tab-box">
                            <div class="tab-content">
                                <div class="single-tab-content tab-pane fade in active" id="description">
                                    {{ goods.description }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </section>

    <section class="shop">
        <div class="container">
            <div class="section-title center pb-60">
                <h2>其他<span>商品</span></h2>
            </div>

            <div class="team-list row">
                {% for item in others_list %}
                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="item wow fadeIn" data-wow-duration="2s" data-wow-delay="0.5s" data-wow-offset="0"
                             style="visibility: visible; animation-duration: 2s; animation-delay: 0.5s; animation-name: fadeIn;">
                            <figure class="img-holder">
                                <a href="/shop/goods/{{ item.id }}"><img src="{{ item.pic.url }}" alt="{{ item.name }}"></a>
                            </figure>
                            <div class="content">
                                <h2><a href="/shop/goods/{{ item.id }}">{{ item.name }}</a></h2>
                                <p>{{ item.price }} 元</p>
                                <div class="cart">
                                    <a href="cart.html"><span class="flaticon-shop"></span></a>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>

        </div>
    </section>

{% endblock %}

{% block custom_body_js %}
    <script>
        function upate_total() {
            //total =
            price = $('.price-box').text().split('元')[0];
            num = $('#number').val();
            total = parseFloat(price.trim()) * parseInt(num);
            $('#gtotal').text(total.toFixed(1) + '元')

        }

        $('#number').blur(function () {

            count = $(this).val();
            g_count = count;
            if (parseInt(count <= 0) || isNaN(count)) {
                //输入值无效
                $(this).val(g_count);
                return
            }
            upate_total();
        });
        upate_total();


        $('.add_cart').click(function () {
            sku_id = $('.price-box').attr('sku_id');
            count = $('#number').val();
            $.post('/shop/cart/add', {'sku_id': sku_id, 'count': count}, function (data) {
                if (data.res == 6) {
                    alert(data.message);
                } else {
                    alert(data.errmsg);

                }
            });
        })


    </script>
{% endblock %}